<template>
	<view class="box">
		<view style="padding-bottom: 40rpx;">
			<view class="why-title" style="margin-left: 40rpx;text-align: left;margin-bottom: 40rpx;">常见问题</view>
			<view class="question-box">
				<view class="question-list" v-for="(item,index) in questionList" :key="item.id">
					<view class="question-title flex fljcsb flai" @click="showOrHide(index)">
						<view class=" flex flex1">
							<image src="../../static/image/quest.png" mode="" style="width: 30rpx;height: 30rpx;margin-right:10rpx;margin-top:6rpx"></image>
							<text>{{index+1}}、</text>
							<text class="flex1">{{item.title}}</text>

						</view>
						<image src="../../static/image/arrow-right.png" mode="" class="arrow-right" :class="[item.isSelect?'translate':'']"></image>
						
					</view>
					<view class="question-con" :style="{'display':item.isSelect?'block':'none'}">
						{{item.question}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../api/index.js'
	export default {
		data() {
			return {
				questionList: [],
			}
		},
		onLoad() {
			this.getQuestionList()
		},
		methods: {
			// 获取问题列表
			getQuestionList() {
				var data = {
					categoryId: 122,
					pageNo: 1,
					pageSize: 10
				}
				api.joinHellp.getQuestionList(data).then(res => {
					if (res.code == 1) {
						var list = res.data.records
						for (var k in list) {
							list[k]['isSelect'] = false
						}
						this.questionList = list
					}
				})
			},
			showOrHide(index) {
				this.questionList[index]['isSelect'] = !this.questionList[index]['isSelect']
			},
		}
	}
</script>

<style>
	@import "../../static/css/common.css";
	@import url("./myMutualHelp.css");
</style>
